<template>
	<view class="my-container">
			<!-- 背景图 -->
			<image class="bg-image" src="http://localhost:8080/img/profile/bg.png" mode="aspectFill"></image>
			
			<!-- 主卡片容器，包含所有元素 -->
			<view class="profile-card">
				<!-- 头像（定位在卡片顶部中央） -->
				<image class="avatar" src="/static/logo.png"  mode="aspectFill"></image>
		
				<!-- 用户信息 -->
				<view class="user-info">
					<text class="user-name">jerry</text>
					<text class="ye" >编辑个人资料▶</text>
					<button class="login-btn" >退出登录</button>
				</view>
			</view>
		</view>
		
		<!-- 功能图标区域 -->
		<view class="feature-section">
			<!-- 第一行功能 -->
			<view class="feature-row">
				<view class="feature-item">
					<view class="feature-icon star-icon">☆</view>
					<text class="feature-text">我的收藏</text>
				</view>
				<view class="feature-item">
					<image src="/static/logo.png" class="feature-icon owner-icon" />
					<text class="feature-text">我的出租</text>
				</view>
				<view class="feature-item">
					<image src="/static/zuo.svg" class="feature-icon owner-icon" />
					<text class="feature-text">看房记录</text>
				</view>
			</view>
			
			<!-- 第二行功能 -->
			<view class="feature-row">
				<view  class="feature-item">
					<image src="/static/zuo.svg" class="feature-icon owner-icon" />
					<text class="feature-text">成为房主</text>
				</view>
				<view  class="feature-item">
					<image src="/static/zuo.svg" class="feature-icon owner-icon" />
					<text class="feature-text">个人资料</text>
				</view>
				<view  class="feature-item">
					<image src="/static/zuo.svg" class="feature-icon owner-icon" />
					<text class="feature-text">联系我们</text>
				</view>
			</view>
			<!-- 底部文字 -->
			<view class="huan-ying">
				<text class="run">欢迎访问仓库</text><text class="runs">润润</text>
			</view>
		</view>
</template>

<script>
</script>

<style>
	.ye{
			font-size: 30rpx;
			color: rgb(196, 39, 130);
		}
		.my-container {
			width: 100%;
			height: 500rpx;
			position: relative;
			display: flex;
			justify-content: center;
			padding: 100rpx 20rpx 40rpx;
			box-sizing: border-box;
		}
		
		/* 背景图样式 */
		.bg-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		
		/* 主卡片容器 */
		.profile-card {
			position: relative;
			width: 100%;
			max-width: 600rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 10;
			padding-bottom: 40rpx;
		}
		
		/* 头像样式 - 定位在卡片顶部中央 */
		.avatar {
			position: absolute;
			top: -80rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 160rpx;
			height: 160rpx;
			border-radius: 80rpx;
			border: 4rpx solid #fff;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
			z-index: 20;
		}
		
		/* 用户信息区域 */
		.user-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding-top: 100rpx; /* 为头像留出空间 */
			padding-bottom: 60rpx;
			border-bottom: 1rpx solid #f5f5f5;
		}
		
		/* 用户名样式 */
		.user-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 20rpx;
		}
		
		/* 登录按钮样式 */
		.login-btn {
			background-color: rgb(0, 161, 108); /* 设置按钮原色 */
			color: #fff;
			border: none;
			font-size: 28rpx;
			padding: 12rpx 60rpx;
			border-radius: 40rpx;
			line-height: 1.8;
			margin-top: 10rpx;
		}
		
		/* 功能区域样式 */
		.feature-section {
			width: 100%;
			padding: 40rpx 20rpx 20rpx;
			box-sizing: border-box;
		}
		
		/* 功能行样式 */
		.feature-row {
			display: flex;
			justify-content: space-around;
			margin-bottom: 60rpx;
		}
		
		/* 功能项样式 */
		.feature-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
		}
		
		/* 功能图标样式 */
		.feature-icon {
			font-size: 48rpx;
			color: rgb(0, 161, 108);
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			/* 使用伪元素模拟线条图标 */
			position: relative;
			font-size: 0;
		}
		
		/* 功能文字样式 */
		.feature-text {
			font-size: 28rpx;
			color: rgb(0, 161, 108);
		}
		.huan-ying{
			width: 100%;
			text-align: center;
			margin-top: 40px;
		}
		.huan-ying .run{
			color: rgb(0, 161, 108); 
		}
		.huan-ying .run{
			color:#c42782;
		}
</style>